{% extends 'loyout.html' %}
{% block html %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
            <div style="margin: 10px 0;">
                <a class="btn btn-primary" href="/add_teacher/">添加</a>
                <a class="btn btn-info" id="btnAdd">对话框添加</a>

            </div>
            <table class="table table-striped table-bordered table-hover" border="1">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>班级</th>
                        <th>教师名称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in teacher_list %}
                        <tr>
                            <td>{{ row.tid }}</td>
                            <td>{% for item in row.titles %}
                                    <span style="display: inline-block;padding: 5px;border: 1px solid red;">{{ item }}</span>
                                {% endfor %}</td>
                            <td>{{ row.name }}</td>
                            <td>
                                 <a class="glyphicon glyphicon-pencil" href="/edit_teacher/?nid={{ row.tid }}"></a>
                                |
                                <a class="glyphicon glyphicon-trash" href="/del_teacher/?nid={{ row.tid }}"></a>
                                |
                                 <a class="btnEdit glyphicon glyphicon-hourglass">对话框编辑</a>

                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <!--导入-->
            <script src="/static/jquery-3.5.1.js"></script>
            <div id="shadow" class="shadow hide"></div>
            <div id="loading" class="loading hide"></div>
            <div id="add-modal" class="add-modal hide">

                <p>
                    老师姓名：<input type="text" name="name" id="addName" />
                </p>
                <p>
                    <select id="class_ids" multiple size="10">

                    </select>
                </p>
                <a id="addSubmit">提交</a>
            </div>
            <div id="edit-modal" class="add-modal hide">
                <p>
                    老师姓名：<input type="text" name="title" id="editName" />
                    <input id="teachers"  name="teacher_id" type="text" style="display:none" />
                </p>
                <p>
                    <select  id="class_id" multiple size="10">

                    </select>
                </p>

                <a id="editSubmit">提交</a>
            </div>

    </body>
    </html>

{% endblock %}
{% block css %}
     <style>
                .hide{
                display: none;
            }
                .shadow{
                    position: fixed;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    background-color: black;
                    opacity: 0.5;
                    z-index: 999;

                }
                .loading{
                    position: fixed;
                    width: 60px;
                    height: 60px;
                    left: 50%;
                    top: 50%;
                    margin-left: -30px;
                    margin-top: -30px;
                    background-image: url("/static/loading.gif");

                }
                .add-modal{
                     position: fixed;
                    left: 50%;
                    top: 50%;
                    width: 400px;
                    height: 300px;
                    background-color: white;
                    margin-left: -200px;
                    margin-top: -200px;
                    z-index: 1000;

                }
     </style>
{% endblock %}
{% block js %}
     <script>
                 //等页面加载完成绑定事件
                $(function () {
                    bindAdd();
                    bindAddSubmit();
                    bindEdit();
                    bindEditSubmit();

                })
                function bindAdd() {
                    $('#btnAdd').click(function () {
                            $('#shadow,#loading').removeClass('hide');

                            $.ajax({
                                url:'/get_all_class/',
                                type:'GET',
                                dataType:'JSON',
                                success:function (arg) {
                                    $.each(arg,function (i,row) {
                                        var tag=document.createElement('option') ;
                                        tag.innerHTML=row.title;
                                        tag.setAttribute('value',row.id);
                                        $('#class_ids').append(tag)

                                    });
                                    $('#loading').addClass('hide');
                                    $('#add-modal').removeClass('hide');

                                }

                            })
                    })
                }
                function bindAddSubmit() {
                       $('#addSubmit').click(function () {
                           var name = $('#addName').val();
                           var class_id_list = $('#class_ids').val();
                           $.ajax({
                               url:'/modal_add_teacher/',
                               data:{'name':name,'class_id_list':class_id_list},
                               type:'POST',
                               traditional:true,
                               dataType: 'JSON',
                               success:function (arg) {
                                    if(arg.status){
                                        location.reload();
                                    }else{
                                        alert(arg.message);
                                    }

                               }
                           })

                       });


                }
                function bindEdit() {
                    $('.btnEdit').click(function () {

                        $('#shadow,#loading').removeClass('hide');
                        var tds=$(this).parent().prevAll();
                        var teacher_name=$(tds[0]).text()
                        var teacher_id=$(tds[2]).text()
                        $('#teachers').val(teacher_id)
                        $('#editName').val(teacher_name)
                        $.ajax({
                            url:'/get_class_id/',
                            type:'GET',
                            data:{'teacher_id':teacher_id},
                            dataType:'JSON',
                            success:function (arg) {
                                $.each(arg,function (i,row) {
                                        var tag=document.createElement('option') ;
                                        tag.innerHTML=row.title;
                                        if(row.status){
                                            tag.setAttribute('selected','selected')
                                            tag.setAttribute('value',row.id);
                                        }else{
                                             tag.setAttribute('value',row.id);
                                        }

                                        $('#class_id').append(tag)

                                    });
                                    $('#loading').addClass('hide');
                                    $('#edit-modal').removeClass('hide');
                                    console.log(arg.status)


                            }
                        })



                    })

                }
                function bindEditSubmit() {
                    $('#editSubmit').click(function () {
                            var name = $('#editName').val();
                            var class_id_list = $('#class_id').val();
                            var nid=$('#teachers').val();
                            $.ajax({
                                url:'/modal_edit_teacher/',
                                type:'POST',
                                traditional:true,
                                data:{'name':name,'class_id_list':class_id_list,'nid':nid},
                                dataType:'JSON',
                                success:function (arg) {
                                    if(arg.status){
                                        location.reload();
                                    }else {
                                        alert(arg.message);
                                    }


                                }
                            })

                    })

                }
            </script>
{% endblock %}